<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>天气案例-深度监视-简写</title>
</head>

<body>
    <div id="root">
        <h1>今天天气很{{info}} </h1>
        <button @click="update">修改天气</button><br/>

    </div>
    <script>
        const vm = new Vue({
                el: '#root',
                data: {
                    tianqi: true,

                },
                methods: {
                    update() {
                        this.tianqi = !this.tianqi;
                    }
                },
                computed: {
                    info() {
                        return this.tianqi ? "很热" : "很冷"
                    }
                },
                watch: {
                    //正常写法
                    //mmediate: true, // 当初始化时让  handler调用
                    //deep：true，    //开启深度监视
                    // tianqi: {
                    //     handler(newvalue, oldvalue) {
                    //         console.log("tianqi呗修改", newvalue, oldvalue)
                    //     }
                    // },

                    //简写
                    tianqi(newvalue, oldvalue) {
                        console.log("tianqi呗修改", newvalue, oldvalue)
                    }
                }

            })
            //另一种写法
            //  vm.$watch('tianqi',{
            //      //mmediate: true, // 当初始化时让  handler调用
            //     handler(newvalue, oldvalue) {
            //              console.log("tianqi呗修改", newvalue, oldvalue)
            //     }
            //  })

        //简写
        // vm.$watch('tianqi',function(newvalue, oldvalue){
        //     console.log("tianqi呗修改", newvalue, oldvalue)
        // })
    </script>
</body>

</html>